<template>
  <div id="shopcart">
    <search style="width: 75%"/>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class='selectAll'>全选</el-checkbox>
    <span style="width: 342px; height: 50px; display: inline-block">商品信息</span>
    <!-- <span style="width: 150px; height: 50px; display: inline-block"></span> -->
    <span style="width: 130px; height: 50px; display: inline-block">单价</span>
    <span style="width: 120px; height: 50px; display: inline-block">数量</span>
    <span style="width: 120px; height: 50px; display: inline-block">金额</span>
    <span style="width: 70px; height: 50px; display: inline-block">操作</span>
    <span style="height: 50px; display: inline-block;">
        已选商品<strong style="margin: 0 5px; color: #f40">￥{{priceAll}}</strong>
        <button class="settle" :disabled='priceAll == 0.00' @click="open">结&nbsp;算</button>
    </span>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedGoods" @change="handleCheckedGoodsChange">
      <ul class="shopcart-list">
        <li v-for="items in activeUlData" :key="items.goodsWant.goodsWantId">
          <el-checkbox :label="items" style="vertical-align: top"><div style="display: none"></div></el-checkbox>
          <a style="cursor:pointer" @click="goodsClick(items.goodsWant.goodsWant, items.goodsWant.goodsWantId)"><img :src="items.goodsWant.goodsWantImage" alt=""></a>
          <a @click="goodsClick(items.goodsWant.goodsWant, items.goodsWant.goodsWantId)" style="width: 226px; vertical-align: top; display: inline-block; margin-left: 8px;cursor: pointer">{{items.goodsWant.goodsWantInfo}}</a>
          <span style="margin-left: 117px; width: 80px"><strong>￥{{items.goodsWant.goodsWantPrice}}</strong></span>
          <el-input-number size="mini" v-model="items.needCount" :min='1' :max='+items.goodsWant.goodsWantCount' style="vertical-align: top; margin-left: 40px; width: 85px"></el-input-number>
          <span style="margin-left: 40px; width: 150px; color: #ff4400"><strong>￥{{(items.goodsWant.goodsWantPrice * items.needCount).toFixed(2)}}</strong></span>
          <div style="display: inline-block; vertical-align: top; width: 70px; line-height: 20px">
            <!-- <a href="javascript:void(0)">移入收藏夹</a> -->
            <a href="javascript:void(0)" @click="deleteClick(items.shopId)">删除</a>
          </div>
        </li>
      </ul>
      
    </el-checkbox-group>
  </div>
</template>

<script>
  import search from '@/components/home/search/search'
  import {request} from '@/network/request'

export default {
  components: { search },
  data() {
    return {
      checkAll: false,
      // checkedGoods: ['上海', '北京'],
      checkedGoods: [],
      // isIndeterminate: true
      isIndeterminate: false,
      ulData: [
        {shopId: '', needCount: '', goodsWant: {goodsWantId: '', goodsWant: '', goodsWantImage: '', goodsWantPrice: '', goodsWantCount: '', isDeleted: ''}}
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i1/2934168663/TB1HIBFihPI8KJjSspfXXcCFXXa_!!0-item_pic.jpg_80x80.jpg',
        //  discrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料2', price: '49.50', count: 1},
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i1/2934168663/TB1HIBFihPI8KJjSspfXXcCFXXa_!!0-item_pic.jpg_80x80.jpg',
        //  discrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料3', price: '49.50', count: 1},
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i1/2934168663/TB1HIBFihPI8KJjSspfXXcCFXXa_!!0-item_pic.jpg_80x80.jpg',
        //  discrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料4', price: '49.50', count: 1},
      ]
    };
  },
  computed: {
    // 购物车选中的商品总金额
    priceAll() {
      let priceAll = 0
      for(let i of this.checkedGoods) {
        priceAll += i.goodsWant.goodsWantPrice * i.goodsWant.goodsWantCount
      }
      return priceAll.toFixed(2)
    },
    activeUlData() {
      // 筛选出isDeleted值为false的内容
      return this.ulData.filter(item => !item.goodsWant.isDeleted)
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedGoods = val ? this.ulData : [];
      this.isIndeterminate = false;
    },
    handleCheckedGoodsChange(value) {
      // console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.ulData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.ulData.length;
    },
    deleteClick(shopId) {
      // 点击删除按钮，向服务器发送请求
      request({
        url: `/shoppingcart/deleteShoppingCart/${shopId}`,
        method: 'delete'
      }).then(res => {
        // console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          // 删除成功，重新发请求更新页面数据
          request({
            url: `/shoppingcart/showCartInfo/${this.$store.state.userId}`,
            method: 'get'
          }).then(res => {
            // console.log(res);
            this.ulData = res.data.data.items
          }).catch(err => {
            console.log(err);
          })
        }
      }).catch(err => {
        console.log(err);
      })
    },
    goodsClick(goodsWant, goodsWantId) {
      // 点击商品图片或文字，进入商品详情页面
      this.$store.commit('changeGoodsWantDetail', goodsWant)
      this.$store.commit('changeGoodsId', goodsWantId)
      this.$router.push('/goodsDetail')
    },
    // 点击结算按钮
    open() {
      if(!this.$store.state.isLogin) {
        this.$message({
          message: '您还未登录，请先登录！！',
          type: 'warning'
        })
        this.$router.push('/login')
      } else {
        this.$prompt('请输入支付密码', '支付', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'password',
          inputPlaceholder: '请输入6位数字支付密码',
          inputPattern: /^\d{6}$/,
          inputErrorMessage: '请输入6位数字支付密码'
        }).then(({ value }) => {
          // 输入支付密码点击确定，向服务器发送请求，
          request({
            url: '/user/buy',
            method: 'put'
          }).then(res => {
            console.log(res);
            if(res.data.flag) {
              this.$message({
                type: 'success',
                message: '支付成功'
              });
            }
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '取消购买'
          });       
        });
      }
    }
  },
  // 一进入此页面，就向服务器请求购物车数据
  mounted() {
    request({
      url: `/shoppingcart/showCartInfo/${this.$store.state.userId}`,
      method: 'get'
    }).then(res => {
      // console.log(res);
      this.ulData = res.data.data.items
    }).catch(err => {
      console.log(err);
    })
  }

}
</script>

<style scoped>
  /* #shopcart >>> .searching .demo-autocomplete {
    float: none;
  }

  #shopcart >>> .searching .search-button {
    float: none;
  } */

  #shopcart >>> #searchBox {
    width: 80%;
    margin-top: 20px;
  }

  #shopcart span {
    font-size: 14px;
    color: #606266;
  }

  #shopcart .selectAll {
    /* margin-left: -336px;
    float: left; */
    width: 92px;
    height: 50px;
    margin-right: 30px;
  }

  #shopcart button.settle {
    padding: 4px 15px; 
    background-color: #f40; 
    color: #fff; 
    border: none; 
    cursor: pointer;
    border-radius: 2px;
  }

  #shopcart button.settle:hover {
    background-color: #f22d00;
  }

  #shopcart .shopcart-list {
    border: 1px solid #e8e8e8;
    border-top: none;
    /* width: 1000px; */
  }

  #shopcart .shopcart-list li {
    background-color: #fcfcfc;
    border-top: 1px solid #e8e8e8;
    height: 97px;
    padding: 20px;
  }

  #shopcart .shopcart-list li img {
    width: 80px;
    height: 80px;
  }

  #shopcart .shopcart-list li a {
    font-size: 12px;
    text-decoration: none;
    color: inherit;
  }

  #shopcart .shopcart-list li a:hover {
    color: #f00;
    text-decoration: underline;
  }

  #shopcart .shopcart-list li span {
    vertical-align: top;
    display: inline-block;
    height: 15px;
  }
</style>